<template>
    <div class="content-block">
        <div class="console-title">
            <h2>订单管理->申请退款</h2>
        </div>
        <section>
            <div class="refund flex-row">
                <div class="refund-form" v-if="showForm">
                    <table class="dsxui-formtable">
                        <colgroup>
                            <col class="w80">
                            <col>
                        </colgroup>
                        <tbody>
                        <tr>
                            <td>退款商品</td>
                            <td>{{item.title}}</td>
                        </tr>
                        <tr>
                            <td>服务类型</td>
                            <td>
                                <el-radio :label="1" v-model="refund.refund_type">仅退款</el-radio>
                                <el-radio :label="2" v-model="refund.refund_type">退款退货</el-radio>
                            </td>
                        </tr>
                        <tr>
                            <td>货物状态</td>
                            <td>
                                <el-radio :label="1" v-model="refund.receive_state">已收到货</el-radio>
                                <el-radio :label="0" v-model="refund.receive_state">未收到货</el-radio>
                            </td>
                        </tr>
                        <tr>
                            <td>退款原因</td>
                            <td>
                                <el-select class="w200" size="medium" v-model="refund.refund_reason">
                                    <el-option
                                            v-for="(r,i) in reasons"
                                            :label="r.title"
                                            :value="r.title"
                                            :key="i"
                                    ></el-option>
                                </el-select>
                            </td>
                        </tr>
                        <tr>
                            <td>退款金额</td>
                            <td>
                                <el-input size="medium" class="w200" v-model="refund.refund_amount"></el-input>
                                <p class="tips">最多￥{{item.total_fee}},包含运费￥{{item.shipping_fee}}</p>
                            </td>
                        </tr>
                        <tr>
                            <td>退款说明</td>
                            <td>
                                <el-input type="textarea" rows="5" class="w500" v-model="refund.refund_desc"></el-input>
                            </td>
                        </tr>
                        <tr>
                            <td>上传图片</td>
                            <td>
                                <div class="dsxui-uploader">
                                    <div class="dsxui-uploader-files">
                                        <div class="dsxui-uploader-files-item"
                                             v-for="(img,idx) in images"
                                             :key="idx"
                                        >
                                            <el-image :src="img.thumb" fit="cover" class="image-item"></el-image>
                                            <div class="iconfont icon-close_light del-icon"
                                                 @click.stop="images.splice(idx,1)"></div>
                                        </div>
                                    </div>
                                    <div class="dsxui-uploader-button" @click="showImagePicker=true"
                                         v-if="images.length<3">
                                        <i class="el-icon-plus dsxui-uploader-icon"></i>
                                    </div>
                                </div>
                                <p class="tips">上传凭证,最多3张</p>
                            </td>
                        </tr>
                        </tbody>
                        <tfoot>
                        <tr>
                            <td></td>
                            <td>
                                <el-button size="medium" type="primary" class="w200" @click="handleSubmit">提交
                                </el-button>
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                </div>

                <div class="flex-fill" v-else>
                    <div class="refund-info" v-if="refund.refund_id">
                        <h3>你已成功发起退款申请，请耐心等待商家确认。</h3>
                        <ul class="tips">
                            <li>商家同意或者超时未处理，系统将退款给你</li>
                            <li>如果商家决绝，你可以修改退款申请后再次发起，商家会重新处理</li>
                        </ul>
                        <div class="op-buttons">
                            <el-button size="small" @click="handleRevoke">撤销申请</el-button>
                            <el-button size="small" type="primary" plain @click="showForm=true">修改申请</el-button>
                        </div>
                        <div class="h30"></div>
                        <h3>退款信息</h3>
                        <div class="refund-info-detail">
                            <dl>
                                <dt>退款原因:</dt>
                                <dd>{{refund.refund_reason}}</dd>
                            </dl>
                            <dl>
                                <dt>退款金额:</dt>
                                <dd>{{refund.refund_amount}}</dd>
                            </dl>
                            <dl>
                                <dt>申请时间:</dt>
                                <dd>{{refund.created_at}}</dd>
                            </dl>
                            <dl>
                                <dt>退款编号:</dt>
                                <dd>{{refund.refund_no}}</dd>
                            </dl>
                            <dl v-if="refund.refund_desc">
                                <dt>退款说明:</dt>
                                <dd>{{refund.refund_desc}}</dd>
                            </dl>
                        </div>
                    </div>
                    <div class="h20"></div>
                </div>

                <div class="refund-order">
                    <div class="refund-order-title">订单详情</div>
                    <div class="flex-row item-info">
                        <div class="item-thumb">
                            <img :src="item.thumb" class="img-50" alt="">
                        </div>
                        <div class="flex-fill">
                            <div class="item-title">{{item.title}}</div>
                            <p class="item-sku">{{item.sku_title}}</p>
                        </div>
                    </div>
                    <div class="refund-order-row">
                        <span class="refund-order-row-label">单价</span>
                        <span>:</span>
                        <div class="refund-order-row-value">￥{{item.price}}*{{item.quantity}}</div>
                    </div>
                    <div class="refund-order-row">
                        <span class="refund-order-row-label">运费</span>
                        <span>:</span>
                        <div class="refund-order-row-value">￥{{item.shipping_fee}}</div>
                    </div>
                    <div class="refund-order-row">
                        <span class="refund-order-row-label">优惠金额</span>
                        <span>:</span>
                        <div class="refund-order-row-value">￥{{item.promotion_fee}}</div>
                    </div>
                    <div class="refund-order-row">
                        <span class="refund-order-row-label">商品总价</span>
                        <span>:</span>
                        <div class="refund-order-row-value">￥{{item.total_fee}}</div>
                    </div>
                </div>
            </div>
        </section>
        <image-picker v-model="showImagePicker" @confirm="handlePickedImage"></image-picker>
    </div>
</template>

<script>
    import ImagePicker from "../../lib/ImagePicker";

    export default {
        name: "ApplyRefund",
        components: {
            ImagePicker
        },
        data () {
            return {
                item: {},
                refund: {
                    refund_type: 1,
                    receive_state: 1
                },
                reasons: [],
                showImagePicker: false,
                showForm: false,
                images: []
            }
        },
        mounted() {
            const {trade_id} = this.$route.params;
            this.$get('/webapi/bought/getitem', {trade_id}).then(response => {
                let item = response.data.item;
                if (item) {
                    this.item = item;
                    this.refund.refund_amount = item.total_fee;
                }
            });
            this.$get('/webapi/refund/query', {trade_id}).then(response => {
                const {refund} = response.data;
                if (refund) {
                    this.refund = refund;
                    this.showForm = false;
                    this.images = refund.images;
                }
            }).catch(reason => {
                this.showForm = true;
            });
            this.fetchReasons();
        },
        methods: {
            fetchReasons() {
                this.$get('/webapi/refundreason/getall').then(response => {
                    this.reasons = response.data.items;
                });
            },
            handlePickedImage: function (img) {
                this.images.push({
                    thumb: img.thumb,
                    image: img.image
                });
            },
            handleSubmit() {
                const refund = this.refund;
                const {refund_amount, refund_reason} = refund;
                if (!refund_reason) {
                    this.$showToast('请选择退款原因');
                    return false;
                }

                if (isNaN(refund_amount)) {
                    this.$showToast('退款金额必须是数字');
                    return false;
                }

                if (refund_amount <= 0) {
                    this.$showToast('退款金额必须大于0');
                    return false;
                }

                const images = this.images;
                const {refund_id} = refund;
                if (refund_id) {
                    this.$post('/webapi/refund/update', {refund_id, refund, images}).then(response => {
                        this.refund = response.data.refund;
                        this.showForm = false;
                    });
                } else {
                    const {trade_id} = this.$route.params;
                    this.$post('/webapi/refund/create', {trade_id, refund, images}).then(response => {
                        this.refund = response.data.refund;
                        this.showForm = false;
                    });
                }
            },
            handleRevoke() {
                this.$confirm('确定要撤销此次退款申请吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const {refund_id} = this.refund;
                    this.$post('/webapi/refund/revoke', {refund_id}).then(response => {
                        this.$showToast('退款申请已撤销', this.$router.go(-1));
                    });
                });
            }
        }
    }
</script>

<style scoped>

</style>
